export default {
  data() {
    return {
      pieChart: null,
      timer: null
    }
  },
  methods: {
    renderPieChart(date, index = 0) {
      let item = date[index]
      var dataStyle = {
        normal: {
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          shadowBlur: 0,
          shadowColor: '#203665'
        }
      };
      let option = {
        series: [{
          name: '第一个圆环',
          type: 'pie',
          clockWise: true,
          radius: [65, 71],
          itemStyle: dataStyle,
          hoverAnimation: false,
          center: ['28%', '50%'],
          data: [{
            value: item.paid,
            dateT: item.date,
            label: {
              normal: {
                rich: {
                  a: {
                    color: '#FE5C02',
                    align: 'center',
                    lineHeight: 40,
                    fontSize: 22,
                    fontWeight: "bold"
                  },
                  b: {
                    color: '#737373',
                    align: 'center',
                    fontSize: 18
                  },
                  c: {
                    color: '#C9C9C9',
                    align: 'center',
                    fontSize: 16
                  }
                },
                formatter: function (params) {
                  return "{a|" + params.data.value + "元\n}" + "{b|已付}" + "\n\n{c|" + params.data.dateT + "}";
                },
                position: 'center',
                show: true,
                textStyle: {
                  fontSize: '14',
                  fontWeight: 'normal',
                  color: '#FE6008'
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#FF5A01',
                shadowColor: '#2c6cc4',
                shadowBlur: 0
              }
            }
          }, {
            value: item.total,
            name: 'invisible',
            itemStyle: {
              normal: {
                color: '#DDDDDD'
              },
              emphasis: {
                color: '#DDDDDD'
              }
            }
          }]
        }, {
          name: '第二个圆环',
          type: 'pie',
          clockWise: true,
          radius: [65, 71],
          itemStyle: dataStyle,
          hoverAnimation: false,
          center: ['72%', '50%'],
          data: [{
            value: item.payable,
            dateT: item.date,
            label: {
              normal: {
                rich: {
                  a: {
                    color: '#FE5C02',
                    align: 'center',
                    lineHeight: 40,
                    fontSize: 22,
                    fontWeight: "bold"
                  },
                  b: {
                    color: '#737373',
                    align: 'center',
                    fontSize: 18
                  },
                  c: {
                    color: '#C9C9C9',
                    align: 'center',
                    fontSize: 16
                  }
                },
                formatter: function (params) {
                  return "{a|" + params.value + "元\n}" + "{b|未付}" + "\n\n{c|" + params.data.dateT + "}";
                },
                position: 'center',
                show: true,
                textStyle: {
                  fontSize: '14',
                  fontWeight: 'normal',
                  color: '#fff'
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#FD6109',
                shadowColor: '#ef45ac',
                shadowBlur: 0
              }
            }
          }, {
            value: item.total,
            name: 'invisible',
            itemStyle: {
              normal: {
                color: '#DDDDDD'
              },
              emphasis: {
                color: '#412a4e'
              }
            }
          }]
        }]
      }
      this.pieChart.setOption(option)
      this.timer = setTimeout(() => {
        if (index < (date.length - 1)) {
          this.renderPieChart(date, index + 1)
        } else {
          this.renderPieChart(date)
        }
      }, 5000)
    }
  },
}
